<template>
	<div id="venueManage">
		<div class="breadcrumb">
			<img src="../../../../static/img/venueManage_1.png" class="head_img">
			<span class="title">场馆管理</span>
		</div>
		<div class="list">
			<div class="list_head">
				<span>场馆列表</span>
				<el-button class="config" type="primary" @click="holidayConfig()">节假日设置</el-button>
				<el-button class="add" type="primary" @click="newVenue()">添加场馆</el-button>
			</div>
			<el-table :data="list" @row-click="detail">
				<el-table-column prop="venueName" label="场馆名称">
				</el-table-column>
				<el-table-column label="所属校区" prop="unName" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="startTime" label="开馆时间" width="100">
				</el-table-column>
				<el-table-column prop="endTime" label="闭馆时间" width="100">
				</el-table-column>
				<el-table-column label="场地">
					<template scope="scope">
						<div v-for="item in scope.row.fields" :key="item.name">{{item.name}}</div>
					</template>
				</el-table-column>
				<el-table-column label="场地状态">
					<template scope="scope">
						<span v-if="scope.row.venueStatus ==0">开启</span>
						<span v-if="scope.row.venueStatus ==1">关闭</span>
					</template>
				</el-table-column>
				<el-table-column width="400" align="right">
					<template scope="scope">
						<el-button size="small" type="text" @click.stop="allFields(scope.row)">所有场地</el-button>
						<el-button size="small" type="text" v-if="scope.row.venueStatus==1" @click.stop="openVenue(scope.row)">开启场馆</el-button>
						<el-button size="small" type="text" v-if="scope.row.venueStatus==0" @click.stop="closeVenue(scope.row)">关闭场馆</el-button>
						<el-button size="small" type="text" v-if="scope.row.canEdit" @click.stop="newVenue(scope.row)">编辑</el-button>
						<el-button size="small" type="text" v-if="scope.row.canEdit" @click.stop="deleteVenue(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				totalCount: 0,
				currentPage: 1
			};
		},
		mounted() {
			this.getVenueList();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			// 场馆列表
			getVenueList() {
				let url = this.$util.domain + "/erp/api/v20/venue/list";

				this.$http({
					url,
					method: "GET",
					params: {
						pageSize: 10,
						pageNum: this.currentPage
					}
				}).then(response => {
					this.list = [];
					if (response.data.error == 10000) {
						let venueList = response.data.data.data;
						this.totalCount = response.data.data.total * 1;
						if (venueList && venueList.length > 0) {
							for (let i = 0; i < venueList.length; i++) {
								let $venueName = venueList[i].name,
									$unName = venueList[i].unName,
									$venueId = venueList[i].id,
									$fields = venueList[i].fields,
									$venueStatus = venueList[i].status,
									$startTime = venueList[i].startTime,
									$zoneName = venueList[i].zoneName,
									$canEdit = venueList[i].canEdit,
									$unid = venueList[i].unid,
									$endTime = venueList[i].endTime;

								this.list.push({
									unid: $unid,
									unName: $unName,
									fields: $fields,
									endTime: $endTime,
									venueId: $venueId,
									canEdit: $canEdit,
									zoneName: $zoneName,
									startTime: $startTime,
									venueName: $venueName,
									venueStatus: $venueStatus
								});
							}
						}
					}
				});
			},
			//请求分页数据
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getVenueList();
			},
			//所有场地
			allFields(row) {
				let params = {
					unid: row.unid,
					venueId: row.venueId,
					endTime: row.endTime.replace(":", "-"),
					startTime: row.startTime.replace(":", "-")
				}
				this.$util.refreshTo("/#/fieldManage", params);
			},
			//开启场馆
			openVenue(row) {
				this.$confirm("您确定要开启“" + row.venueName + "”吗？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					this.updateStatus(row.venueId, 0, (response) => {
						if (response.data.error == 10000) {
							this.$util.successMsg("场馆开启成功");
							this.getVenueList();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				}).catch(() => {
					//
				});
			},
			//关闭场馆
			closeVenue(row) {
				this.$confirm("关闭场馆后，该场馆将不再接收任何订单,是否继续关闭？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					this.updateStatus(row.venueId, 1, (response) => {
						if (response.data.error == 10000) {
							this.$util.successMsg("场馆删除成功");
							this.getVenueList();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				}).catch(() => {
					//
				});
			},
			//变更场馆状态
			updateStatus(id, status, callback) {
				let url = this.$util.domain + "/erp/api/v20/venue/action";

				this.$http({
					url,
					method: "GET",
					params: {
						action: status,
						venueId: parseInt(id)
					}
				}).then(response => {
					callback(response);
				});
			},
			//场馆详情
			detail(row) {
				location.href = `/#/venueDetail?venueId=${row.venueId}`;
			},
			//新增/编辑场馆
			newVenue(row) {
				if (row) {
					location.href = `/#/newVenue?venueId=${row.venueId}`;
				} else {
					location.href = "/#/newVenue?venueId=0";
				}
			},
			//删除场馆
			deleteVenue(row) {
				this.$confirm("场馆下的场地以及订单信息将同时被删除，是否继续删除场馆？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					let url = this.$util.domain + "/erp/api/v20/venue/del";

					this.$http({
						url,
						method: "GET",
						params: {
							venueId: row.venueId * 1
						}
					}).then(response => {
						if (response.data.error == 10000) {
							this.$util.successMsg("删除成功");
							this.getVenueList();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				}).catch(() => { });
			},
			//节假日设置
			holidayConfig() {
				location.href = "/#/holidayConfig";
			}
		}
	};
</script>

<style>
	#venueManage {
		padding-top: 80px;
		height: calc(100% - 100px);
	}

	#venueManage .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #f7fcff;
		cursor: pointer;
	}

	#venueManage .add {
		position: absolute;
		right: 0px;
	}

	#venueManage .config {
		position: absolute;
		right: 100px;
	}
</style>